<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div slot="header">
          <!-- pagetools工具栏组件  -->
          <PageTools>
            <template #before>
              <el-button type="primary" size="small" @click="addCust">
                添加客户
              </el-button>
            </template>
            <template #after>
              <div style="margin-top: 10px;">
                <el-select v-model="value" style="margin-left:-210px" @change="selectChange">
                  <el-option
                    label="全部经纪"
                    :value="0"
                  />
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-input v-model="searchValue" placeholder="请输入关键字" style="width:500px">
                  <el-button slot="append" @click="search">筛选</el-button>
                </el-input>
              </div>
            </template>
          </PageTools>
        </div>
        <!-- 表格显示 -->
        <el-table :data="tableData" border style="200px">
          <el-table-column prop="image" label="图片" width="156">
            <!-- <template v-slot="{row}"> -->
            <img style="width:100%;height:100%" src="http://localhost:9528/static/img/2.2f6ea906.jpg" alt="">
            <!-- </template> -->
          </el-table-column>
          <el-table-column prop="name" label="名称" width="156" />
          <el-table-column prop="email" label="邮箱" width="156" />
          <el-table-column prop="phone" label="电话" width="156" />
          <el-table-column prop="agent.name" label="经纪" width="156" />
          <el-table-column prop="wechat" label="微信" width="156" />
          <el-table-column prop="desc" label="介绍" width="156" />
          <el-table-column label="操作" width="156">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="change"
          />
        </el-row>
      </el-card>
      <!-- 添加用户 -->
      <addCust ref="addCust" :show-dialog.sync="showDialog" @updateEvent="getCustomerList" />
    </div>
  </div>
</template>

<script>
import { CustomerList, customerNum, delcustomer, getJingJi } from '@/api/kehu'
import addCust from './components/addCust.vue'
export default {
  components: { addCust },
  data() {
    return {
      tableData: [],
      limit: 2,
      start: 0,
      total: 0,
      searchValue: '',
      showDialog: false, // 控制弹窗组件的显示隐藏
      options: [{
        value: '',
        label: ''
      }, {}],
      value: '全部经纪',
      agentID: 0
    }
  },
  created() {
    this.getCustomerList()
    this.customerNum()
    this.getJingJi()
  },
  methods: {
    async selectChange(id) {
      console.log(id)
      this.agentID = id
    },
    // 模糊搜索
    async search() {
      // this.getCustomerList()
      let res
      if (this.agentID === 0) {
        res = await CustomerList({
          name_contains: this.searchValue
        })
      } else {
        res = await CustomerList({
          name_contains: this.searchValue,
          agent: this.agentID
        })
      }

      // console.log(97, res)
      // console.log('获取列表数据')
      this.tableData = res.data
    },
    // 新增
    addCust() {
      // 控制弹窗显示
      this.showDialog = true
    },
    // 获取经纪列表
    async getJingJi() {
      const res = await getJingJi({
        _limit: this.limit,
        _start: this.start

      })
      this.options = res.data
      console.log(109, res)
    },
    // 获取客户列表
    async getCustomerList() {
      const res = await CustomerList({
        _limit: this.limit,
        _start: this.start,
        name_contains: this.searchValue
      })
      console.log(97, res)
      // console.log('获取列表数据')
      this.tableData = res.data
    },
    // 获取客户数量
    async customerNum() {
      const res = await customerNum({ name_contains: this.name })
      this.total = res.data
    },
    // 分页
    change(val) {
      this.start = 2 * (val - 1)
      this.getCustomerList()
    },
    // 编辑
    editFn(id) {
      this.showDialog = true
      // 调用接口获取客户详情
      this.$refs.addCust.getcustomerDetail(id)
    },
    // 删除客户
    delFn(id) {
      this.$confirm('确定要删除该客户?', '提示', {
        type: 'warning'
      }).then(async() => {
        await delcustomer(id)
        /**
         * 判断到删除的是最后一条数据，我们更新列表的时候
         * 应该请求上一页的数据才对，注意：需要判断当前页面是否为第一页
         * 如果是第一页则不需要请求上一页的数据。
         * 如何判断此刻是在删除最后一条数据？
         * 答：roleList.length === 1说明是最后一条数据了!
         * */
        if (this.limit.length === 1 && this.start !== 1) {
          this.start--
        }
        // 刷新列表
        this.getCustomerList()
        this.$message.success('删除成功！')
      }).catch((err) => {
        console.log('用户点击了取消按钮:', err)
      })
    }
  }

}

</script>

<style>

</style>
